<template>
  <div class="sidebar_alarm_content">
    <div class="alarm-up">
      <div class="title">
        <p>告警分类统计</p>
      </div>
      <div class="menu">
        <ul>
          <li class="menu-selected">全部</li>
          <li>今日</li>
          <li>本周</li>
          <li>本月</li>
          <li>近一年</li>
        </ul>
      </div>

    </div>
    <div class="alarm-dn">
      <div id="charts" ref="alarm_charts"></div>
    </div>
  </div>
</template>
<script>
import * as ec from "echarts"

export default {
  name: "sidebar_alarm",
  data() {
    return {
      colorList: ["#EB2F96", "#E157CA", "#7b2020"],
      echartsinstance: null,
      options: {
        grid: {
          x: 0,
          y: 0,
          x2: 5,
          y2: 0,
        },
        title: [
          {
            text: `{name|1600}\n{val|累计告警总数}`,
            top: 'center',
            left: 'center',
            textStyle: {
              rich: {
                name: {
                  fontSize: 20,
                  color: '#ffffff',
                  padding: [5, 0],
                  fontWeight: 'bold',
                },
                val: {
                  fontSize: 10,
                  color: '#ffffff'
                }
              }
            }
          },

        ],

        tooltip: {
          trigger: 'item',
          formatter: '{b}  {d}%',
        },
        label: {
          color: "white"
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '65%',
            data: [
              {value: 1000, name: '超限报警 1000条'},
              {value: 400, name: '温升报警 400条'},
              {value: 200, name: '组合报警 200条'},
            ],
            itemStyle: {
              color: (params) => {
                var index = params.dataIndex;
                return this.colorList[index];
              },
            },
            textStyle: {
              color: "#ffffff"
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

          }
        ]
      },
    }
  },
  mounted() {
    this.echartsinstance = ec.init(this.$refs.alarm_charts)
    this.echartsinstance.setOption(this.options)
  },
  watch: {
    options() {
      this.echartsinstance.setOption(this.options)
    }
  }
}
</script>

<style lang="scss" scoped>
$chartsH: vh(194);

.sidebar_alarm_content {
  .alarm-dn {
    width: 100%;
    height: $chartsH;

    #charts {
      width: 100%;
      height: $chartsH;
    }
  }

  .alarm-up {
    width: 100%;
    height: vh(35);
    display: flex;

    .title {
      width: 1%;
      flex-grow: 1;

      font-size: vh(22);
      color: #04DEFF;
      position: relative;

      p {
        padding-left: vw(35);
        position: absolute;
        bottom: 0;
      }
    }

    .menu {
      width: 1%;
      height: vh(35);
      flex-grow: 1.2;
      font-size: vh(22);
      color: #04DEFF;
      font-size: vh(16);
      display: flex;

      ul {
        width: 100%;
        height: vh(35);
        display: flex;
        justify-content: space-around;
        align-items: center;

        li {
          height: vh(30);
          flex-grow: 1;
          list-style: none;
          line-height: vh(35);
          text-align: center;
          cursor: pointer;
        }
      }

    }
  }

}

.sidebar_alarm_content {
  width: vw(478.67);
  height: vh(229.2);
  margin-left: vw(53);
  margin-top: vh(15);
  background: linear-gradient(180deg, rgba(0, 47, 111, 0.7) 0%, rgba(0, 34, 80, 0.5) 100%);
  opacity: 1;
  border: 1px solid rgba(117, 210, 227, 0.07);
  background-image: url('../assets/image/sidebar_alarm.png');
  background-repeat: no-repeat;
  background-position: center;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.menu-selected {
  background-color: #0098FF;
  color: white;
  border-radius: vh(3);
}
</style>
